<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fns" uri="http://java.sun.com/jsp/jstl/functionss" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Home - BioCode</title>
    <style>
        .content-container {
            padding: 10px 14px;
        }

        #tool-nav-tab {
            padding: 0 15px;
            margin-bottom: 12px;
            background-color: #FAFAFA;
        }

        ol.publications li .citethis {
            font-style: italic;
            color: green;
        }

        .roles {
            margin-left: 10px;
            display: inline;
        }

        .role:first-of-type {
            margin-left: 0;
        }

        .role {
            margin-left: 8px;
        }

        .label-info {
            background-color: #5bc0de;
        }
    </style>

</head>
<body>
<div id="main">
    <div id="tool-header">
        <div class="row content-container" style="padding-bottom: 0">
            <div class="col-md-12">
                <h1 class="tool-title"><a href="${host}/tools/show/${tool.id}">${tool.name}</a>
                    <small>${tool.desc}</small>
                </h1>
            </div>
        </div>
        <ul class="nav nav-tabs" id="tool-nav-tab">
            <li class="active"><a href="${host}/tools/${tool.id}/show"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="${host}/tools/${tool.id}/manual"><i class="fa fa-book"></i> Manual</a></li>
            <li><a href="${host}/tools/${tool.id}/releases"><i class="fa fa-download"></i> Downloads</a></li>
            <li><a href="${host}/tools/${tool.id}/stat"><i class="fa fa-bar-chart"></i> Statistics</a></li>
        </ul>
    </div>
    <c:if test="${admin}">
        <c:set var="currentUser" value="${tool.user}"></c:set>
    </c:if>
    <div class="content-container" style="padding-top: 0px">
        <div class="row">
            <div class="col-md-8"><h3 class="title">Introduction</h3>
                <section class="para"><p>${tool.introduction}</p></section>
                <h3 class="title">Publications</h3>
                <ol class="publications">
                    <c:forEach items="${tool.publicationList}" var="p">
                        <li>
                            <h5><a href="http://dx.doi.org/${p.doi}" target="blank">${p.title}</a>

                                <c:if test="${p.citethis}">
                                    <div aria-label="Please cite this if you use this tool in your work"
                                         class="citethis hint--bottom hint--info"><i class="fa fa-hand-o-left"></i> Cite
                                        this
                                    </div>
                                </c:if>
                            </h5>
                            <div class="meta">${p.authors},
                                    ${p.date} - <em>${p.journal}</em></div>
                            <div class="citation">Cited by ${p.citation }(Google Schoolar as of ${tool.updatedAt} )
                            </div>
                        </li>
                    </c:forEach>
                </ol>
                <%--                <h3 class="title">Publications</h3>
                                <ol class="publications">
                                    <c:forEach items="${tool.publicationList}" var="p">
                                        <li><h5><a href="http://dx.doi.org/${p.doi}" target="blank">${p.title}</a></h5>
                                            <div class="meta">${p.authors},
                                                    ${p.date} - <em>${p.journal}</em></div>
                                            <div class="citation">Cited by ${p.citation }(Google Schoolar as of ${tool.updatedAt} )</div>
                                        </li>
                                    </c:forEach>
                                </ol>--%>
                <h3 class="title">Credits</h3>
                <c:if test="${fn:length(tool.credits)==0}">
                    <div class="empty-placeholder"><p>No Credits Information</p></div>
                </c:if>
                <c:if test="${fn:length(tool.credits)>0}">
                    <ol class="credits">
                        <c:forEach var="credit" items="${tool.credits}">
                        <li>${credit.user.fullName}
                            <a href="mailto:${credit.user.email}">${credit.user.email}</a>
                            <div class="roles">
                                <c:forEach var="crole" items="${credit.creditRoleList}">
                                <span class="label role label-info"><i class="fa fa-user-circle-o"></i>${crole.name}</span>
                                </c:forEach>
                            </div>
                            <p>BIG Data Center, Beijing Institute of Genomics (BIG), Chinese Academy of Sciences,
                                China</p>
                        </li>
                        </c:forEach>
                    </ol>
                </c:if>
                <h3 class="title">Community Ratings</h3>
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                    <tr>
                        <th width="150px">Usability</th>
                        <th width="150px">Efficiency</th>
                        <th width="150px">Reliability</th>
                        <th>Rated By</th>
                    </tr>
                    <tr>
                        <td>
                            <div data-dimension="usability" class="star"
                                 data-score="${fns:calAvgStarByRateableAndDimension(tool.id ,'usability','Tool' )}"
                                 data-rateable-id="${tool.id}" data-rateable-type="Tool" data-rater-id="0"
                                 data-cancel="true" data-read-only="true"></div>
                        </td>
                        <td>
                            <div data-dimension="efficiency" class="star"
                                 data-score="${fns:calAvgStarByRateableAndDimension(tool.id ,'efficiency','Tool')}"
                                 data-rateable-id="${tool.id}" data-rateable-type="Tool" data-rater-id="0"
                                 data-cancel="true" data-read-only="true"></div>
                        </td>
                        <td>
                            <div data-dimension="reliability" class="star"
                                 data-score="${fns:calAvgStarByRateableAndDimension(tool.id ,'reliability','Tool')}"
                                 data-rateable-id="${tool.id}" data-rateable-type="Tool" data-rater-id="0"
                                 data-cancel="true" data-read-only="true"></div>
                        </td>
                        <td><a class="show-ratings"
                               href="#">${fns:countDistinctRateIdByRateableIdAndRateableType(tool.id ,'Tool')} users</a>
                        </td>


                    </tr>
                    <tr>
                        <c:if test="${currentUser != null}">
                            <td>
                                <div data-dimension="usability" class="star"
                                     data-score="${fns:calStarByUserAndToolAndDimension(currentUser.id,tool.id ,'usability' )}"
                                     data-id="${fns:calIdByUserAndToolAndDimension(currentUser.id,tool.id ,'usability')}"
                                     data-rateable-id="${tool.id}" data-rateable-type="Tool"
                                     data-rater-id="${currentUser.id}" data-cancel="true"></div>
                            </td>
                            <td>
                                <div data-dimension="efficiency" class="star"
                                     data-score="${fns:calStarByUserAndToolAndDimension(currentUser.id,tool.id ,'efficiency')}"
                                     data-id="${fns:calIdByUserAndToolAndDimension(currentUser.id,tool.id ,'efficiency')}"
                                     data-rateable-id="${tool.id}" data-rateable-type="Tool"
                                     data-rater-id="${currentUser.id}" data-cancel="true"></div>
                            </td>
                            <td>
                                <div data-dimension="reliability" class="star"
                                     data-score="${fns:calStarByUserAndToolAndDimension(currentUser.id,tool.id ,'reliability')}"
                                     data-id="${fns:calIdByUserAndToolAndDimension(currentUser.id,tool.id ,'reliability')}"
                                     data-rateable-id="${tool.id}" data-rateable-type="Tool"
                                     data-rater-id="${currentUser.id}" data-cancel="true"></div>
                            </td>
                            <td><a class="show-ratings">${currentUser.email}</a></td>
                        </c:if>
                        <c:if test="${currentUser == null}">
                            <td colspan="4" style="text-align:center"><a target="_blank"
                                                                         href="http://sso.big.ac.cn/login?service=${host}/login"><i
                                    class="fa fa-sign-in"></i><span>Sign in to rate</span></a></td>
                        </c:if>

                    </tr>
                    <tbody style="display: none">
                    <c:forEach items="${userIds}" var="userId">
                        <c:if test="${currentUser.id != userId}">
                            <tr>
                                <td>
                                    <div data-dimension="usability" class="star"
                                         data-score="${fns:calStarByUserAndToolAndDimension(userId,tool.id ,'usability' )}"
                                         data-id="10"
                                         data-rateable-id="${tool.id}" data-rateable-type="Tool"
                                         data-rater-id="${userId}" data-read-only="true"></div>
                                </td>
                                <td>
                                    <div data-dimension="efficiency" class="star"
                                         data-score="${fns:calStarByUserAndToolAndDimension(userId,tool.id ,'efficiency')}"
                                         data-id="10"
                                         data-rateable-id="${tool.id}" data-rateable-type="Tool"
                                         data-rater-id="${userId}" data-read-only="true"></div>
                                </td>
                                <td>
                                    <div data-dimension="reliability" class="star"
                                         data-score="${fns:calStarByUserAndToolAndDimension(userId,tool.id ,'reliability')}"
                                         data-id="10"
                                         data-rateable-id="${tool.id}" data-rateable-type="Tool"
                                         data-rater-id="${userId}" data-read-only="true"></div>
                                </td>
                                <td>${fns:calRateUserAndCreatedAt(userId,tool.id ,'Tool')}</td>
                            </tr>
                        </c:if>
                    </c:forEach>
                    </tbody>
                    </thead>
                </table>
            </div>
            <div class="col-md-4 bordered-left">
                <c:if test="${currentUser.id == tool.user.id}">
                    <div class="row">
                        <div class="col-md-12" style="margin-bottom: 10px">
                            <div class="btn-group btn-group-sm pull-right"><a class="btn btn-primary"
                                                                              href="${host}<c:if test="${admin}">/admin</c:if>/tools/${tool.id}/edit"><i
                                    class="fa fa-edit"></i> Edit</a><a class="btn btn-danger" rel="nofollow"
                                                                       data-method="delete"
                                                                       href="${host}<c:if test="${admin}">/admin</c:if>/tools/${tool.id}/delete"><i
                                    class="fa fa-trash"></i> Delete</a></div>
                        </div>
                    </div>
                </c:if>
                <div class="panel panel-info">
                    <div class="panel-heading">Summary</div>
                    <table class="table table-condensed">
                        <tbody>
                        <tr>
                            <th width="150px">Accession</th>
                            <td><a href="${host}/tools/${tool.id}/show">${accession}</a></td>
                        </tr>
                        <tr>
                            <th>Tool Type</th>
                            <td><a href="${host}/tools/search?tool_type_id=${item.id}">${tool.toolType.name}</a>

                            </td>
                        </tr>
                        <tr>
                            <th>Category</th>
                            <td>
                                <c:forEach items="${tool.categories}" var="item" varStatus="index">
                                    <a href="${host}/tools/search?categoriy_id=${item.id}">${item.name}</a>
                                    <c:if test="${index.last==false}">,</c:if>
                                </c:forEach>


                            </td>
                        </tr>
                        <c:if test="${fn:length(tool.platforms) > 0}">
                            <tr>
                                <th>Platforms</th>
                                <td>
                                    <c:forEach items="${tool.platforms}" var="item" varStatus="index">
                                        <a href="${host}/tools/search?platform_id=${item.id}">${item.name}</a>
                                        <c:if test="${index.last==false}">,</c:if>
                                    </c:forEach>
                                </td>
                            </tr>
                        </c:if>
                        <tr>
                            <th>Technologies</th>
                            <td>
                                <c:forEach items="${tool.teches}" var="item" varStatus="index">
                                    <a href="${host}/tools/search?tech_id=${item.id}">${item.name}</a>
                                    <c:if test="${index.last==false}">,</c:if>
                                </c:forEach>

                            </td>
                        </tr>
                        <tr>
                            <th>User Interface</th>
                            <td>

                                <c:forEach items="${tool.userInterfaces}" var="item" varStatus="index">
                                    <a href="${host}/tools/search?user_interface_id=${item.id}">${item.name}</a>
                                    <c:if test="${index.last==false}">,</c:if>
                                </c:forEach>
                            </td>
                        </tr>
                        <c:if test="${fn:length(tool.dataTypes) > 0}">
                            <tr>
                                <th>Input Data</th>
                                <td>
                                    <c:forEach items="${tool.dataTypes}" var="item" varStatus="index">
                                        <a href="${host}/tools/search?input_data_id=${item.id}">${item.name}</a>
                                        <c:if test="${index.last==false}">,</c:if>
                                    </c:forEach>

                                </td>
                            </tr>
                        </c:if>
                        <tr>
                            <th>Download Count</th>
                            <td>${fns:calToolDownloadCount(tool.id)}</td>
                        </tr>
                        <tr>
                            <th>Country/Region</th>
                            <td>${tool.country}</td>
                        </tr>
                        <tr>
                            <th>Submitted By</th>
                            <td><span>${tool.user.email}</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <c:if test="${not empty tool.fundings}">
                    <div class="panel panel-info">
                        <div class="panel-heading">Fundings</div>
                        <div class="panel-body"><p class="text-justify">${tool.fundings}</p></div>
                    </div>
                </c:if>
            </div>

        </div>
    </div>
</div>
<script>
    $('.show-ratings').click(function (e) {
        e.preventDefault();
        $tbody = $(this).parents('table').find('tbody');
        if ($tbody.is(':visible'))
            $tbody.hide();
        else
            $tbody.show();
    });


    $('.star').raty({
        starHalf: '${host}/static/img/star-half.png',
        starOn: '${host}/static/img/star-on.png',
        starOff: '${host}/static/img/star-off.png',
        cancelOff: '${host}/static/img/cancel-off.png',
        cancelOn: '${host}/static/img/cancel-on.png',
        click: function (score, evt) {
            var data = {
                "id": $(this).data('id'),
                "raterId": $(this).data('rater-id'),
                "rateableType": $(this).data('rateable-type'),
                "rateableId": $(this).data('rateable-id'),
                "dimension": $(this).data('dimension'),
                "stars": score
            };
            var $s = $(this);
            console.log(data);
            $.ajax({
                type: "POST",
                data: data,
                url: "${host}/rate/tools/save",
                cache: false,
                success: function (result) {
                    if (result.status == 0) {
                        location.reload();
                    }
                    else {
                        console.log("save error！");
                    }
                },
                error: function () {

                    console.log("has error！");
                }
            });

        }


    });
</script>
</body>

</html>
